<!--
* @name: 自定义级联选择器
* @author: zhangpengcheng
* @date: 2022-08-19
-->
<template>
  <div>
    <template v-if="!lookflag">
      <el-cascader
        v-loading="selLoading"
        style="width: 100%"
        v-model="data"
        ref="elCascader"
        :clearable="clearable"
        :show-all-levels="showAllLevels"
        :options="options"
        @change="change"
        @focus="focus"
        :props="selectprops"
        :disabled="disabled"
      ></el-cascader>
    </template>
    <template v-else="!lookflag">
      <div>
        {{ showValue }}
      </div>
    </template>
  </div>
</template>

<script>
import {getUserModuleApi} from "@/api/integrationOption/integrationOption.js";
// import { areaGroupby } from "@/api/apis/auth.js";
export default {
  name: "customCascader",
  components: {},
  props: {
    value: {
      type: String,
    },
    // 字段
    field: {
      type: String,
      default: "",
    },
    // 类型  1 组织或网格  2  场所类型
    type: {
      type: Number,
      default: 1,
    },
    // 输入框中是否显示选中值的完整路径
    showAllLevels: {
      type: Boolean,
      default: false,
    },
    // 是否支持清空选项
    clearable: {
      type: Boolean,
      default: true,
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    // 清除状态
    clearState: {
      type: Number,
      default: 0,
    },
    // 清除状态
    modelData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    itemObj: {
      type: Object,
      default: () => {
        return {};
      },
    },
    ruleForm: {
      type: Object,
      default: () => {
        return {};
      },
    },
    lookflag: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      selectprops: {
        label: 'label',
        value: 'id',
        expandTrigger: "hover",
        checkStrictly: true,
        children: "children",
      },
      options: [],
      showValue: "",
      selLoading: false,
      data: [],
    };
  },
  created() {
    if (Object.keys(this.ruleForm).length && this.ruleForm[this.itemObj.id]) {
      this.getSelectdata(this.ruleForm[this.itemObj.id]);
    }
  },
  mounted() {
    // this.data = this.value.split(',')
    if (this.value) {
      this.data = this.value.split(",")
    }
    this.getTreeSelect()
  },
  watch: {
    // 监听数字变动，就重置
    // clearState() {
    //   this.model = [];
    // },
    data(newV) {
      this.$emit("input", newV.join(','));
    }
  },
  computed: {},
  methods: {
    // id找值
    filterid(id, arr) {
      let result = arr.find((item) => {
        if (item.id === id) {
          return item;
        } else if (item.children) {
          return this.filterid(id, item.children);
        }
      });
      if (result) {
        // this.options.push(result);
        this.showValue = result['label'];
      }
    },
    // 根据id找值
    async getSelectdata(id) {
      this.selLoading = true;
      const res = await getUserModuleApi(
        {
          tl: "mdmService",
          as: "mdmService",
          dj: "queryMdmShowTreeData",
        },
        {
          tableName: this.itemObj.service,
          value: this.itemObj.value,
          label: this.itemObj.label,
          upId: this.itemObj.upId,
          id: id,
        }
      );
      if (res.status == 200) {
        this.filterid(id.split(',').slice(-1)[0], res.attribute);
        // this.options = res.attribute;
        // this.showValue = res.attribute[0][this.itemObj.label];
        this.selLoading = false;
      }
    },
    // 查询表
    async getTreeSelect(obj = {}) {
      const res = await getUserModuleApi(
        {
          tl: "mdmService",
          as: "mdmService",
          dj: "queryMdmShowTreeData",
        },
        {
          tableName: this.itemObj.service,
          value: this.itemObj.value,
          label: this.itemObj.label,
          upId: this.itemObj.upId,
          ...obj,
        }
      );
      this.options = res.attribute;
    },
    // 回显数据
    setEchoData(model) {
      this.model = model;
    },
    // 级联选择器更改值
    change() {
    },
    // 查询函数
    areaGroupby() {
    },
    focus() {
      // this.getTreeSelect();
    },
  },
};
</script>
<style scoped lang='scss'>
</style>
